<template>
  <div class="flowpath-container">
    <div>
      <div class="mb20">
        <span class="color_494949 ft12 pr5">{{ translate('关键字') }}：</span>
        <el-input
          v-model="searchInfo"
          class="w164 mr10"
          :placeholder="translate('请输入关键字')"
        />
        <el-button class="settingBtn mr10" type="primary" @click="getList">
          {{ translate('查询') }}
        </el-button>
      </div>
      <div class="add">
        <el-button
          v-if="MenuAuths('add')"
          class="settingBtn"
          type="primary"
          @click="addFn"
          plain
        >
          {{ translate('新增') }}
        </el-button>
      </div>
      <el-table :data="tableData">
        <!-- <el-table-column label="序号" type="index" width="80" /> -->
        <el-table-column
          :label="translate('入库单名称')"
          prop="FullName"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('采购订单编码')"
          prop="Code"
          show-overflow-tooltip
        />
        <!-- <el-table-column label="项目名称" prop="PName" /> -->
        <el-table-column :label="translate('供货商名称')" prop="SupName" />
        <el-table-column
          :label="translate('仓库点名称')"
          prop="WHName"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('创建日期')"
          prop="CreateDate"
          show-overflow-tooltip
        />
        <el-table-column
          :label="translate('到货日期')"
          prop="ArrivalDate"
          show-overflow-tooltip
        />
        <el-table-column :label="translate('操作')" width="200">
          <template #default="{ row }">
            <el-button
              v-if="MenuAuths('edit')"
              plain
              size="small"
              type="primary"
              @click="detailFn(row)"
            >
              {{ translate('详情') }}
            </el-button>
            <el-button
              v-if="MenuAuths('delete')"
              plain
              size="small"
              type="danger"
              @click="deletedFn(row)"
            >
              {{ translate('删除') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          :current-page="pageNo"
          :layout="layout"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="dialogVisible"
      :title="translate('采购订单明细')"
      width="1200px"
      @close="closeFn"
    >
      <detail
        :agreementlist="agreementList"
        :chileddetail="chileddetail"
        :form="form"
        :supplierdata="SupplierData"
        @deletedchild="deletedchild"
      />
      <template #footer>
        <el-button @click="dialogVisible = false">
          {{ translate('取消') }}
        </el-button>
        <el-button type="primary" @click="submit">
          {{ translate('确定') }}
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {
    Wms_PurchaseList,
    Wms_PurchaseDel,
    UpdatePurchaseOrder,
    AddPurchaseOrder,
    Wms_PurchaseDaetail,
    agreePageData,
    Wms_SupplierData,
  } from '@/api/form'
  import detail from './components/detail'
  import { MenuAuth } from '~/src/utils/permission'
  import { translate } from '@/i18n'
  export default defineComponent({
    name: 'Purchase',
    components: { detail },
    data() {
      return {
        tableData: [],
        searchInfo: '',
        total: 0,
        pageNo: 1,
        pageSize: 20,
        dialogVisible: false,
        enabled: 0,
        DetailPageData: {},
        chileddetail: [],
        submitType: 'add',
        agreementList: [],
        SupplierData: [], // 供货商单位
        layout: 'total, sizes, prev, pager, next, jumper',
        deleList: [],
        MenuAuths: '',
        POMId: '',
        form: {
          Code: '',
          PONo: '',
          CNo: '',
          SupID: '',
          SupName: '',
          SupContact: '',
          SupTelePhone: '',
          RequirDate: '',
          ArrivalDate: '',
          OrderNo: '',
          PID: '',
          PName: '',
          WHID: '',
          WHName: '',
          WorkNo: '',
          LCNo: '',
          TrackNo: '',
          CustomNo: '',
          ProjectName: '',
        },
        rules: {
          code: [{ required: true, trigger: 'blur', message: '请输入工号' }],
          Account: [
            { required: true, trigger: 'blur', message: '请输入登录账号' },
          ],
          workFlowName: [
            { required: true, trigger: 'blur', message: '请输入账号名称' },
          ],
        },
      }
    },
    created() {
      this.MenuAuths = MenuAuth
      this.getList()
    },
    methods: {
      translate(row) {
        return translate(row)
      },
      async getList() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: JSON.stringify([
            { name: 'FullName', value: this.searchInfo, displayType: 'like' },
          ]),
          export: false,
          value: '',
        }
        const data = await Wms_PurchaseList(params)
        this.tableData = data.data.rows
        this.total = data.data.total
        console.log(this.tableData)
      },
      deletedchild(e) {
        this.deleList = e
        console.log(e)
      },
      deletedFn(row) {
        this.$confirm(translate('确认删除该文件吗?'), translate('提示'), {
          confirmButtonText: translate('确定'),
          cancelButtonText: translate('取消'),
          type: 'warning',
        })
          .then(() => {
            this.deleted(row)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: translate('已取消删除'),
            })
          })
      },
      async deleted(row) {
        const POMId = []
        POMId.push(row.POMId)
        const params = POMId
        const data = await Wms_PurchaseDel(params)
        if (data.code == '200') {
          this.$message({
            message: translate('删除成功'),
            type: 'success',
          })
          await this.getList()
        }
      },
      //分页条数切换
      handleSizeChange(val) {
        this.pageSize = val
        this.getList()
      },
      //分页切换
      handleCurrentChange(val) {
        this.pageNo = val
        this.getList()
      },
      async addFn() {
        this.deleList = []
        this.submitType = 'add'
        this.form = {
          Code: '',
          PONo: '',
          CNo: '',
          SupID: '',
          SupName: '',
          SupContact: '',
          SupTelePhone: '',
          RequirDate: '',
          ArrivalDate: '',
          OrderNo: '',
          PID: '',
          PName: '',
          WHID: '',
          WHName: '',
          WorkNo: '',
          LCNo: '',
          TrackNo: '',
          CustomNo: '',
          ProjectName: '',
        }
        await this.agreePageData()
        await this.Wms_SupplierData()
        this.chileddetail = []
        this.dialogVisible = true
      },
      submit() {
        if (this.submitType === 'add') {
          this.AddPurchaseOrder()
        } else {
          this.updataSaveList()
        }
      },
      closeFn() {
        this.enabled = 0
        this.form.WorkFlowID = ''
      },
      async detailFn(row) {
        this.deleList = []
        this.form = row
        this.POMId = row.POMId
        this.submitType = 'edit'
        await this.Wms_PurchaseDaetail()
        await this.agreePageData()
        await this.Wms_SupplierData()
        this.dialogVisible = true
        console.log(this.form)
      },
      async Wms_PurchaseDaetail() {
        const params = {
          pageNo: 1,
          pageSize: 10,
          total: 0,
          tableName: '',
          sort: '',
          order: '',
          wheres: '',
          export: true,
          value: this.POMId,
        }
        const data = await Wms_PurchaseDaetail(params)
        if (data.master) {
          this.$nextTick(() => {
            this.chileddetail = data.rows
          })
        }
        console.log(data)
      },
      async Wms_SupplierData() {
        const params = {
          pageNo: 1,
          pageSize: 100,
          tableName: '',
          sort: '',
          order: '',
          wheres: '',
          export: true,
          value: '',
        }
        const data = await Wms_SupplierData(params)
        this.SupplierData = data.data.rows
      },
      async agreePageData() {
        const params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          tableName: '',
          sort: '',
          order: '',
          wheres: '',
          export: true,
          value: '',
        }
        const data = await agreePageData(params)
        this.agreementList = data.data.rows
      },
      async AddPurchaseOrder() {
        const params = {
          mainData: this.form,
          detailData: this.chileddetail,
          delKeys: [],
        }
        const data = await AddPurchaseOrder(params)
        if (data.code == '200') {
          this.getList()
          this.$message({
            message: translate('保存成功'),
            type: 'success',
          })
          this.dialogVisible = false
        }
      },
      async updataSaveList() {
        const params = {
          mainData: this.form,
          detailData: this.chileddetail,
          delKeys: this.deleList,
        }
        const data = await UpdatePurchaseOrder(params)
        if (data.code == '200') {
          this.getList()
          this.$message({
            message: translate('保存成功'),
            type: 'success',
          })
          this.dialogVisible = false
        }
      },
    },
  })
</script>
<style lang="scss" scoped>
  .flowpath-container {
    .color_494949 {
      color: #494949;
    }
    .w164 {
      width: 164px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mr10 {
      margin-right: 10px;
    }
    .add {
      margin-bottom: 10px;
      text-align: left;
    }
  }
</style>
